<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad, onPageScroll, onShareAppMessage } from "@dcloudio/uni-app";
import { getDetail, postExchange, getIsCollect, updateCollectStatus, type GoodsInfo } from "@/api/goods";
import { useAccountStore } from "@/stores/account";
import { checkLogin } from "@/utils";

const accountStore = useAccountStore();

const info = reactive<GoodsInfo>({
  id: 0,
  price: '0.00',
  active_status: 2,
  num: 0,
  title: '',
  desc: '',
  content: '',
  apply: []
});

// 收藏
const isCollect = ref(false);
/** 处理收藏状态 */
async function handleCollect () {
  if(!checkLogin()) return;
  const { status } = await updateCollectStatus({id: info.id});
  uni.showToast({ title: `${status ? '收藏' : '取消'}成功` });
  isCollect.value = status;
}

async function handleExchange() {
  if(!checkLogin()) return;
  await postExchange({id: info.id});
  uni.showToast({ title: `兑换成功` });
}

onLoad(async (options)=>{
  if(options?.id){
    const data = await getDetail({id: options.id});
    Object.assign(info, data);

    // 查询收藏状态
    if(accountStore.hasLogin) {
      const { status } = await getIsCollect({id: options.id});
      isCollect.value = status;
    }
  }
});

onShareAppMessage(()=>{
  const { userInfo } = useAccountStore();
  return {
    title: info.title,
    path: `/pages/activity/detail?id=${info.id}&uid=${userInfo.id}`,
    imageUrl: info.imgs
  }
});

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
  <view class="relative overflow-hidden">
    <page-navbar title="商品详情" :isScrolled="isScrolled"></page-navbar>

    <image class="w-full h-52 align-middle bg-black" :src="`https://api.minglvtang.com${info.imgs}`" mode="aspectFit" />

    <view class="relative px-4 py-5 grid gap-3 bg-white grid-cols-5">
      <button open-type="share" class="bg-transparent size-10 flex items-center justify-around bg-white shadow-xl shadow-black/9 rounded-full absolute -top-5 right-18">
        <view class="i-material-symbols-share text-#1373FF"></view>
      </button>
      <view class="size-10 flex items-center justify-around bg-white shadow-xl shadow-black/9 rounded-full absolute -top-5 right-4" @click="handleCollect">
        <view :class="`i-solar-star-bold ${isCollect ? 'text-#FBCD38' : 'text-black/60'}`"></view>
      </view>
      
      <view class="text-(2xl #333333) font-500 truncate col-span-5">{{info.title}}</view>
    </view>

    <view class="mt-3 mx-4 mb-10 pt-1 shadow-2xl shadow-[#1373FF]/8 rounded-lg bg-gradient-to-br from-#5199F9 to-#0164E6">
      <view class="flex justify-around">
        <view class="font-500 px-10 py-2 text-(lg center) rounded-t-md text-black bg-white">内容详情</view>
      </view>

      <view class="p-3 bg-white rounded-b-lg grid gap-3">
        <view class="text-(sm #333333)">
          <rich-text :nodes="info.content"></rich-text>
        </view>
      </view>
    </view>

    <view class="h-12">
      <view class="bg-#253851 w-86 fixed bottom-5 left-50% -translate-x-50% z-10 rounded-lg overflow-hidden flex items-center">
        <view class="flex-1 px-4">
          <view class="text-white flex items-end" v-if="info.price > 0">
            <view class="text-sm">¥</view>
            <view class="ml-1 text-xl/6">{{info.price}}</view>
          </view>
          <view class="text-(xl white)" v-else>免费</view>
        </view>
        <view 
          v-if="info.price > 0" 
          class="bg-([url(https://static.minglvtang.com/images/bg_entry.png)] contain no-repeat center) w-37 h-12 flex items-center justify-around text-(lg white)"
          @click="handleExchange"
        > 立即兑换 </view>
        <button 
          v-else 
          open-type="contact"
          class="bg-([url(https://static.minglvtang.com/images/bg_entry.png)] contain no-repeat center transparent) w-37 h-12 flex items-center justify-around text-(lg white)"
        >
          联系客服
        </button>
      </view>
    </view>
  </view>
</template>
